﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Draft.aspx.cs" Inherits="Draft" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">   
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true"></asp:ScriptManager>  
              
<asp:Button runat="server" ID="btnPickPlayer" 
      OnCommand="Pick_Click" CommandName="pickPlayer" RunAt="server" style="display:none;" />

<div id="left" style="position:relative; float:left; width:500px">

            <div id="lineup_draft">
            <div class="boxHeader"><div class="boxHeaderText">MY LINEUP</div></div>
            <asp:UpdatePanel ID="UpdatePanel3" runat="server">
      <ContentTemplate>
      <div id="keepers">
        <div class="lineupHeader">Keepers</div>
        <div id="keeperNumbers">
            <div id="pos0" class="shirt notPicked" runat="server">1<div id="pos0name" runat="server">Not picked</div></div>
            <div id="pos1" class="shirt notPicked" runat="server">12<div id="pos1name" runat="server">Not picked</div></div></div>
     </div>
      <div id="defenders">
        <div class="lineupHeader">Defenders</div>
          <div id="defenderNumbers">
            <div id="pos2" class="shirt notPicked" runat="server">2<div id="pos2name" runat="server">Not picked</div></div>
            <div id="pos3" class="shirt notPicked" runat="server">3<div id="pos3name" runat="server">Not picked</div></div>
            <div id="pos4" class="shirt notPicked" runat="server">4<div id="pos4name" runat="server">Not picked</div></div>
            <div id="pos5" class="shirt notPicked" runat="server">5<div id="pos5name" runat="server">Not picked</div></div>
            <div id="pos6" class="shirt notPicked" runat="server">13<div id="pos6name" runat="server">Not picked</div></div>
            <div id="pos7" class="shirt notPicked" runat="server">14<div id="pos7name" runat="server">Not picked</div></div>
        </div>
      </div>
      <div id="midfielders">
        <div  class="lineupHeader">Midfielders</div>
        <div id="midfielderNumbers">
            <div id="pos8" class="shirt notPicked" runat="server">6<div id="pos8name" runat="server">Not picked</div></div>
            <div id="pos9" class="shirt notPicked" runat="server">7<div id="pos9name" runat="server">Not picked</div></div>
            <div id="pos10" class="shirt notPicked" runat="server">8<div id="pos10name" runat="server">Not picked</div></div>
            <div id="pos11" class="shirt notPicked" runat="server">15<div id="pos11name" runat="server">Not picked</div></div>
            <div id="pos12" class="shirt notPicked" runat="server">16<div id="pos12name" runat="server">Not picked</div></div>
        </div>
      </div>
      <div id="forwards">
        <div class="lineupHeader">Forwards</div>
        <div id="forwardNumbers">
            <div id="pos13" class="shirt notPicked" runat="server">9<div id="pos13name" runat="server">Not picked</div></div>
            <div id="pos14" class="shirt notPicked" runat="server">10<div id="pos14name" runat="server">Not picked</div></div>
            <div id="pos15" class="shirt notPicked" runat="server">11<div id="pos15name" runat="server">Not picked</div></div>
        </div>
      </div>
     </ContentTemplate>
     <Triggers>
     </Triggers>
    </asp:UpdatePanel>
   </div>
       <div id="container">
        <div class="boxHeader"><div class="boxHeaderText">DRAFTING POOL</div></div>
    <div>
    <div id="controls">
    <div id="headerTeams">Select team:</div>
    <div id="teamControls"><asp:DropDownList ID="TeamDD"  AutoPostBack="true" OnSelectedIndexChanged="onTeam_Selected" runat="server"/></div>
    <div id="headerPosition">Select position:</div>
    <div id="positionControls"><asp:DropDownList ID="PositionDD"   AutoPostBack="true" runat="server" OnSelectedIndexChanged="onPosition_Selected"/></div>
    </div>
       
    </div>
      
     <asp:UpdatePanel ID="UpdatePanel" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
      <ContentTemplate>
        <asp:Panel id="PlayerPanel" runat="server"></asp:Panel>
     </ContentTemplate>
     <Triggers>
        <asp:AsyncPostBackTrigger ControlID="PositionDD" EventName="SelectedIndexChanged" />
        <asp:AsyncPostBackTrigger ControlID="TeamDD" EventName="SelectedIndexChanged" />
     </Triggers>
    </asp:UpdatePanel>
   </div>
       </div>

<div id="rightContent">
       <div id="draftLog">
    <div class="boxHeader"><div class="boxHeaderText">DRAFTING LOG</div></div>
    <ul id="draftLogList" style="list-style-type:none">
    <li>Draft has begun</li>
    </ul>
    </div>
    <div id="draftcontainer">
    <div class="boxHeader"><div class="boxHeaderText">DRAFT ORDER</div></div>
             <asp:UpdatePanel ID="UpdatePanel1" runat="server">
              <ContentTemplate>
                <div runat="server" id="Round1">
                </div>
                <div runat="server" id="Round2">
                <div class="roundheader">ROUND 2</div>
                </div>
                <div runat="server" id="Round3">
                <div class="roundheader">ROUND 3</div>
                </div>
                <div runat="server" id="Round4">
                <div class="roundheader">ROUND 4</div>
                </div>
                <div runat="server" id="Round5">
                <div class="roundheader">ROUND 5</div>
                </div>
                <div runat="server" id="Round6">
                <div class="roundheader">ROUND 6</div>
                </div>
                <div runat="server" id="Round7">
                <div class="roundheader">ROUND 7</div>
                </div>
                <div runat="server" id="Round8">
                <div class="roundheader">ROUND 8</div>
                </div>
                <div runat="server" id="Round9">
                <div class="roundheader">ROUND 9</div>
                </div>
                <div runat="server" id="Round10">
                <div class="roundheader">ROUND 10</div>
                </div>
                <div runat="server" id="Round11">
                <div class="roundheader">ROUND 11</div>
                </div>
                <div runat="server" id="Round12">
                <div class="roundheader">ROUND 12</div>
                </div>
                <div runat="server" id="Round13">
                <div class="roundheader">ROUND 13</div>
                </div>
                <div runat="server" id="Round14">
                <div class="roundheader">ROUND 14</div>
                </div>
                <div runat="server" id="Round15">
                <div class="roundheader">ROUND 15</div>
                </div>
                <div runat="server" id="Round16">
                <div class="roundheader">ROUND 16</div>
                </div>
          <%--  <asp:Repeater runat="server" id="draftOrderRepeater" OnItemDataBound="Repeater_ItemDataBound">
              <HeaderTemplate>
                <ul>
              </HeaderTemplate>
              <ItemTemplate>
                <li runat="server" id="draftPick">
                <%#((DraftPick)Container.DataItem).userName%></li>
              </ItemTemplate>
              <FooterTemplate>
                </ul>
              </FooterTemplate>
            </asp:Repeater>--%>
             </ContentTemplate>
            </asp:UpdatePanel>
            </div>
     <div id="chat">
         <div class="boxHeader"><div class="boxHeaderText">CHAT</div></div>
        <input type="hidden" id="displayname" />
        <div id="loadmessages"></div>
        <div id="chatfooter">
        <label id="sendLabel">Say something: </label><input type="text" id="messagetext"/><input type="button" id="btnsendmessage" value="Send" />
        </div>
    </div>
       </div>
    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script type="text/javascript" src="../Scripts/jquery-1.6.4.js"></script>
    <!--Reference the SignalR library. -->
    <script type="text/javascript" src="../Scripts/jquery.signalR-1.1.2.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script type="text/javascript" src="../signalr/hubs"></script>
    <!--Add script to update the page and send messages.-->
    <script type="text/javascript">


        $(document).ready(function () {
            $("input").bind("keydown", function (event) {
                var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
                if (keycode == 13) {
                    document.getElementById('btnsendmessage').click();
                    return false;
                } else {
                    return true;
                }
            });

       

        });

        $(function () {

            var autoScrollEnabled = true;

            function toggleAutoScroll() {
                autoScrollEnabled = !autoScrollEnabled; //! reverses the value, true becomes false, false becomes true
                if (autoScrollEnabled == true) { //scroll down immediately if a.s. is reenabled
                    $('#loadmessages').scrollTop($('#loadmessages')[0].scrollHeight);
                }
            }
            function autoScroll() {
                if (autoScrollEnabled == true) { //scroll down immediately if a.s. is reenabled
                    $('#loadmessages').scrollTop($('#loadmessages')[0].scrollHeight);
                }
            }




            $('form').keypress(function (event) {
                return event.keyCode != 13;
            });

            // Declare a proxy to reference the hub.
            var chat = $.connection.draftHub;

            $('#MainContent_UpdatePanel').delegate('.checkmark', 'click', function (e) {
                var keepers = document.getElementsByClassName("keeper");
                var defenders = document.getElementsByClassName("defender");
                var midfielders = document.getElementsByClassName("midfielder");
                var forwards = document.getElementsByClassName("forward");
                if (forwards.length < 3 || keepers.length < 2 || midfielders.length < 5 || defenders.length < 6) {
                    onPlayerClick(e);
                } else {
                    alert("You already have enough  players in that position ");
                    alert(keepers.length + " - " + defenders.length + " _ " + midfielders.length + " " + forwards.length);
                }

            });


            function onPlayerClick(e) {
                var sender = (e && e.target) || (window.event && window.event.srcElement);
                //sender is the DOM element which was clicked
                ;
                var elements = $(".activePlayer").html();
                var n = elements.split(" - ");
                var activeUserName = n[1];
                activeUserName = activeUserName.replace(/^\s+|\s+$/g, '');
                var yourUsername = '<%=username %>';
                yourUsername = yourUsername.replace(/^\s+|\s+$/g, '');
                var id = e.target.id;
                id = id.replace("MainContent_playerClick_", "MainContent_");
                var name = $("#" + id).text()

                //                var r = confirm("Are you sure?")
                //                if (r == true) {
                //                }
                if (activeUserName.toUpperCase() === yourUsername.toUpperCase()) {

                    //$("#btnPickPlayer").attr('CommandArgument', id);
                    //$("$btnPickPlayer]").click();
                    chat.server.sendPick($('#displayname').val(), name);
                    chat.server.sendNotifications();

                } else {
                    chat.client.displayError("It is not your turn yet!");

                }
            }

            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message.
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();

                var date = new Date();
                var hour = date.getHours();
                var minute = date.getMinutes();
                var seconds = date.getSeconds();

                if (hour === 0) {
                    hour = "00";
                }

                var time = hour + ":" + minute + ":" + seconds;

                // Add the message to the page.
                $('#loadmessages').append('<span class="chatMessage">' + time + '&nbsp;-&nbsp;' + encodedName
                    + ':&nbsp;' + encodedMsg + '<br/></span>');
                autoScroll();
            };


            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastPick = function (name, message) {
                // Html encode display name and message.
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                var date = new Date();
                var hour = date.getHours();
                var minute = date.getMinutes();

                var time = hour + ":" + minute;

                // Add the message to the page.
                $('#draftLogList').append('<span class="chatMessage">' + time + '&nbsp;-&nbsp;' + encodedName
                    + '</strong>:&nbsp;' + encodedMsg + '<br/></span>');
                autoScroll();
                $('#MainContent_UpdatePanel1').animate({ scrollTop: '+=17' });
            };

            // Create a function that the hub can call to broadcast messages.
            chat.client.displayError = function (message) {
                // Html encode display name and message.
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page.
                $('#loadmessages').append('<span class="chatMessage" style="color:Red; font-weight:bold"><strong>' + encodedMsg
                    + '<br/></strong></span>');
                autoScroll();
            };

            // Get the user name and store it to prepend to messages.
            //$('#displayname').val(prompt('Enter your name:', ''));
            $('#displayname').val("<%=username%>");
            // Set initial focus to message input box. 
            $('#messagetext').focus();

            chat.client.receiveNotification = function () {
                console.log("notification received");
                var UpdatePanel1 = '<%=UpdatePanel1.ClientID%>';
                if (UpdatePanel1 !== undefined) {
                    console.log("testing");
                    __doPostBack(UpdatePanel1, '');
                }

                var UpdatePanel = '<%=UpdatePanel.ClientID%>';
                if (UpdatePanel !== undefined) {
                    console.log("testing 2");
                    __doPostBack(UpdatePanel, '');
                }

                var UpdatePanel3 = '<%=UpdatePanel3.ClientID%>';
                if (UpdatePanel3 !== undefined) {
                    console.log("testing 3");
                    __doPostBack(UpdatePanel3, '');
                }
            };

            // Start the connection.
            $.connection.hub.start().done(function () {
                chat.server.joined();
                chat.server.send($('#displayname').val(), "has joined the channel");

                var users = chat.server.getConnectedUsers();

                $('#btnsendmessage').click(function () {
                    // Call the Send method on the hub.
                    if ($('#messagetext').val() !== '') {
                        chat.server.send($('#displayname').val(), $('#messagetext').val());
                    }
                    // Clear text box and reset focus for next comment.
                    $('#messagetext').val('').focus();

                });
            });
        });
    </script>
</asp:Content>

